
<template>
  <el-dialog v-model="ifShow" :title="modelTitle" width="1000" :before-close="handleCancel">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-form-item label="车型" prop="vehicleTypeId">
        <el-select filterable clearable v-model="formData.vehicleTypeId" placeholder="请选择">
          <el-option v-for="item in carTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="车品牌" prop="vehicleBrand">
        <el-input v-model="formData.vehicleBrand" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="车系" prop="vehicleSeries">
        <el-input v-model="formData.vehicleSeries" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="携程车型" prop="ctripId">
        <el-select filterable clearable v-model="formData.ctripId" placeholder="请选择">
          <el-option v-for="item in xcCarTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="飞猪车型" prop="fliggyId">
        <el-select filterable clearable v-model="formData.fliggyId" placeholder="请选择">
          <el-option v-for="item in fzCarTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="南航车型" prop="nanhangId">
        <el-select filterable clearable v-model="formData.nanhangId" placeholder="请选择">
          <el-option v-for="item in nhCarTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="航旅车型" prop="hanglvId">
        <el-select filterable clearable v-model="formData.hanglvId" placeholder="请选择">
          <el-option v-for="item in hnCarTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="同程车型" prop="tcId">
        <el-select filterable clearable v-model="formData.tcId" placeholder="请选择">
          <el-option v-for="item in TcCarTypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import JntApi from "@/api/jnt";
import { ref, onMounted, reactive } from "vue";
import { carTypeArr, xcCarTypeArr, fzCarTypeArr, nhCarTypeArr, hnCarTypeArr, TcCarTypeArr } from "@/enums/common";
const props = defineProps<{}>();
const emit = defineEmits(["success"]);
const formRef: any = ref(null);
let formData: any = ref({
  id: "",
  vehicleTypeId: undefined,
  vehicleBrand: "",
  vehicleSeries: "",
  ctripId: undefined,
  fliggyId: undefined,
  nanhangId: undefined,
  hanglvId: undefined,
  tcId: undefined,
});
// const rules = reactive({
//   platformIds: [{ required: true, message: "请选择!" }],
//   channelIds: [{ required: true, message: "请选择!" }],
//   orderTypes: [{ required: true, message: "请选择!" }],
//   vehicleTypeIds: [{ required: true, message: "请选择!" }],
//   cityIds: [{ required: true, message: "请选择!" }],
//   vehicleSeries: [{ required: true, message: "请选择!" }],
//   remark: [{ required: true, message: "请输入!" }],
// });
const ifShow = ref(false);
const modelTitle = ref();
const cityOptions = ref();
function edit(title: any, row: any) {
  modelTitle.value = title;
  ifShow.value = true;
  if (title == "新增") {
    formData.value = {
      id: "",
      vehicleTypeId: undefined,
      vehicleBrand: "",
      vehicleSeries: "",
      ctripId: undefined,
      fliggyId: undefined,
      nanhangId: undefined,
      hanglvId: undefined,
      tcId: undefined,
    };
  }
  //赋值
  Object.assign(formData.value, row);
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {
  await formRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      let model: any = formData.value;
      JntApi.vehicleSeriesEdit(model).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.message);
          formRef.value.resetFields();
          emit("success");
          handleCancel();
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
}
/**
 * 取消按钮回调事件
 */
function handleCancel() {
  formRef.value.resetFields();
  ifShow.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.flex_box {
  display: flex;
  margin-bottom: 14px;
  position: relative;
}
</style>
